<!DOCTYPE html>
<html lang="en">
<head>  
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>博客</title>
  <!------------------------------------------------------------------------>
  <link rel="shortcut  icon" href="./picture/logo(--).png" type="image/x-icon" />
  <!-- 头部样式 -->
  <link rel="stylesheet" href="./src/css/header.css">
  <!-- 中部样式 -->
  <link rel="stylesheet" href="./src/css/main.css">

  <!-- 清除样式 -->
  <link rel="stylesheet" href="./src/css/resetting.css">
  <!-- 图标字体 -->
  <link rel="stylesheet" href="./src/css/IconFont.css">
  <!-- 水波纹效果模块 -->
  <link rel="stylesheet" href="./resources/waterRipple/waterRippleCss.css">
  <!------------------------------------------------------------------------>
  <script type="module" src="./src/js/app.js"></script>
  <!------------------------------------------------------------------------>
  
</head>
<body>
  <header>
    <article id="Logo">
      <img class="Logos" src="./picture/logo(--).png" alt="logo">
    </article>
    
    <article id="HeadMain">
      <ul>
        <!-- 首页 -->
        <li><a href="http://xuezichen.host3v.com">首页</a></li>
        <!-- 类别 -->
        <li>类别</li>
        <li><a href="./dist/create.html">创作</a></li>
      </ul>

      <!-- 类别盒子 -->
      <div class="HeadMainBox HeadMainBoxHidden">        
        <span>小学作文</span>
        <span>中学作文</span>
        <span>高中议论文</span>
        <span>大学论文</span>
        <span>HTML</span>        
        <span>CSS</span>
        <span>JavaScript</span>        
        <span>ajax</span>
        <span>Vue.js</span>
        <span>node.js</span>
        <span>webpack</span>        
        <span>c</span>        
        <div class="HeadMainBoxShutDown">
          <span class="iconfont">&#xe665;</span>
        </div>
      </div>
    </article>
    
    <article id="Set">
      <!-- 齿轮图标字体 -->
      <span class="iconfont">&#xe609;</span>
      <!-- 设置框 -->
      <div class="SetAttribute">
        <!-- 控制背景颜色 -->
        <div class="backgroundColor">
          <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
          <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </div>
        <!-- 水纹显示与关闭 -->
        <div class="SetChoose">
          水纹效果：
          <label for="you111">有</label>
          <input type="checkbox" id="you111" name="a_checkbox">
          <label for="wu111">无</label>
          <input type="checkbox" id="wu111" name="b_checkbox">
          <!-- 透明度条 -->
          <div class="slippingVisibility">
            透明度  
            <div class="slippingButton"></div>
            <div class="slippingArticle"></div>
          </div>
          <!-- 颜色变化 -->
          <ul class="slippingColor">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </div>

        <!-- 关闭按键 -->
        <div class="SetShutDown">
          <span class="iconfont">&#xe665;</span>
        </div>
      </div>
    </article>  
  </header>
  <main class="container"> 
    <!-- 左侧功能 -->
    <!-- <article id="functionalAreaLeft">
      <strong id="gongneng">功能暂未开发</strong>
    </article> -->

  
    <!-- 中部展示区 -->
    <article id="functionalAreaMiddle">                  
      
    </article>
    <!-- 中部轮播图 -->
    <article id="functionalAreaMiddleSlideShow">
      <!-- 图片 -->
      <div class="AreaMiddleSlideShow">
        <img src="./picture/go1.jpg" alt="图片1">
        <img src="./picture/go2.jpg" alt="图片2">
        <img src="./picture/go3.jpg" alt="图片3">
        <img src="./picture/go4.jpg" alt="图片4">
        <img src="./picture/go5.jpg" alt="图片5">
      </div>
      <!-- 左箭头 -->
      <div class="AreaMiddleArrow AreaMiddleLeftArrow">
        <span class="iconfont-main">&#xe600;</span>
      </div>
      <!-- 右箭头 -->
      <div class="AreaMiddleArrow AreaMiddleRightArrow">
        <span class="iconfont-main">&#xe606;</span>
      </div>
      <!-- 圆点 -->
      <ul class="AreaMiddleDot">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>     
      </ul>
    </article>
    

    <!-- 右侧功能 -->
    <!-- <article id="functionalAreaRight">
      <strong id="gongneng">功能暂未开发</strong>  
    </article> -->
  </main>
</body>
</html>